<template>
    <div style="background-color: white">
        <div class="mui-flex" v-for="(item,index) in liebiaoAr" style="height: 90px;
        border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
                <p class="voucher-description" >{{item.description}}</p>
            </div>
            <div class="cell">
                <div class="number"></div>

                <VouvherSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{item.amounts}}</VouvherSpiner>

                <!--<VouvherSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{item.amounts}}</VouvherSpiner>-->

                <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f-->
                <!--<Spinner  type="2" :index="index" max="500" min="0" unit="1" :amounts="item.amounts"  @addnumberclick="addnumberclick"-->
                          <!--@minusnumberclick="jianshaonumberclick"  width="80px" height="30px" >{{item.amounts}}</Spinner>-->
            </div>
        </div>
    </div>
</template>

<script>
    import VouvherSpiner from "@/components/vouvherSpiner.vue";

    export default {
        name: "voucherSelectCellComponent",

      data() {
        return {
        }
    },
    props: {
        liebiaoAr: {
            type: Array,
            default() {
                return []
            }
        },
    },
    watch: {
        liebiaoAr:{
            handler(newValue,oldValue){
                console.log('列表的数据');
                 console.log(this.liebiaoAr);

            },
            deep:true
        },



    },
    components: {
        VouvherSpiner
    },
        created()
        {

        },

    methods:
    {
        getspinnernumer(data)
        {

            console.log('选择的数据');
            console.log(data);
             // console.log(this.liebiaoAr);

             var  newAr=[];
             newAr=JSON.parse(localStorage.getItem('voucher'));
            var dic=newAr[data.index];
            dic['amounts']=data.amounts;

             newAr.splice(data.index, 1, dic);

            localStorage.setItem('voucher',JSON.stringify
             (newAr));
            this.$emit('liebiaoData',newAr); //主动触发selectHead方法，'123'为向父组件传递的数据



            console.log(newAr);
        },

    }

    }
</script>

<style scoped>

    .voucher-title {
        color: #464646;
        font-size: 0.25rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }

    .voucher-description {
        color: #b1b1b1;
        font-size: 0.2rem;
        text-align: left;
        padding-left: 20px;
        width: 100%;
        padding-top: 10px;

    }
    .number {
        padding-right: 20px;
        padding-top: 20px;
    }

</style>